<template>
    <div class="list">
        <my-head title="列表" :back="false" ></my-head>
        <div class="list-box">
            <div class="bleft">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="l.text" :name="i" v-for="(l,i) in types" :key="i"/>
                </van-sidebar>
            </div>
            <div class="bright">

                <clist v-if="active==0" :goods="goods"></clist>
                <clist v-else :goods="goods.filter(item=>item.type.value==types[active].value) "></clist>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            active:0,
            goods:[],
            types:[{
                text:"全部",
                value:'all'
            }]
        }
    },
    methods:{
        async findGoods(){
            let res = await this.$ajax.findGoods()
            var obj = {}
            this.goods = res;
            // 去重 (排序)
            for(var i=0;i<res.length;i++){
                var item = res[i]
                if(!obj[item.type.text]){
                    obj[item.type.text] = item.type.text;
                    this.types.push(item.type)
                }
            }
            console.log(this.types)
        }
    },
    mounted(){
        this.findGoods()
        // this.$ajax.getGoods()
        // .then(res=>{

        // })


    }
}
</script>

<style lang="scss" scoped>
.list{
    width:100%;
    .list-box{
        display: flex;
        height:calc(100vh - 100px);
        overflow: hidden;
        .bleft{
            flex-shrink: 0;
        }
        .bright{
            flex:1;
            overflow: auto;
           
        }
    }
}
</style>